<!--
  * @Description: 招聘-职位发布
  * @Author: rcc
  * @Date: 2024-08-13 10:08:24
  * @FilePath: /rc-recruitment/pages/office/release/release.vue
-->

<template>
  <view class="p-h24 p-t40">
    <view class="p-h30 p-v30 r-10 bg-1">
      <view class="card">
        <view class="must text-700-130">职位名称：</view>
        <input v-model="formState.title" class="input" type="text" placeholder="请填写" />
      </view>
      <view class="card p-t30">
        <view class="must text-700-130">工作性质：</view>
        <view class="flex m-t20">
          <text v-for="item in jobNatureList" :key="item.value" class="tag text-400-126"
            :class="[{ 'tag-el': formState.xingzhi === item.value }]" @click="selectJobNature(item.value)">
            {{ item.label }}
          </text>
        </view>
      </view>
      <view class="card p-t30">
        <view class="must text-700-130">工作地址：</view>
        <view class="flex-sb">
          <view class="picking flex w-200" @click="showCityPicker = true">
            <text v-if="formState.province" class="flex-1 text-400-128">{{ formState.province }}</text>
            <text v-else class="flex-1 text-400-428">请选择</text>
            <image class="square-36" src="@/static/images/public/arrow-2.png" />
          </view>
          <view class="picking flex w-200" @click="showCityPicker = true">
            <text v-if="formState.city" class="flex-1 text-400-128">{{ formState.city }}</text>
            <text v-else class="flex-1 text-400-428">请选择</text>
            <image class="square-36" src="@/static/images/public/arrow-2.png" />
          </view>
          <view class="picking flex w-200" @click="showCityPicker = true">
            <text v-if="formState.area" class="flex-1 text-400-128">{{ formState.area }}</text>
            <text v-else class="flex-1 text-400-428">请选择</text>
            <image class="square-36" src="@/static/images/public/arrow-2.png" />
          </view>
        </view>
        <input v-model="formState.address" class="input" type="text" placeholder="详细位置" />
      </view>
      <view class="card p-t30">
        <view class="must text-700-130">薪资范围：</view>
        <input v-model="formState.money_range" class="input" type="text" placeholder="请填写" />
      </view>
      <view class="card p-t30">
        <view class="must text-700-130">最低学历：</view>
        <input v-model="formState.lowest_education" class="input" type="text" placeholder="请填写" />
      </view>
      <view class="card p-t30" @click="openWorkYearsPicker(formState.work_year)">
        <view class="must text-700-130">工作年限：</view>
        <view class="picking flex">
          <text v-if="formState.work_year" class="flex-1 text-400-128">{{ formState.work_year }}</text>
          <text v-else class="flex-1 text-400-428">请选择</text>
          <image class="square-36" src="@/static/images/public/arrow-2.png" />
        </view>
      </view>
      <view class="card p-t30">
        <view class="must text-700-130">招聘人数：</view>
        <input type="number" v-model="formState.people_num" class="input" placeholder="请填写" />
      </view>
      <view class="card p-t30">
        <view class="must text-700-130">职位描述：</view>
        <textarea v-model="formState.content" class="textarea" placeholder="请填写"></textarea>
      </view>
      <view class="card p-t30">
        <view class="must text-700-130">职位诱惑：</view>
        <view class="flex m-t20">
          <text v-for="(v, i) in fringeList" :key="i" class="tag text-400-126" :class="[{ 'tag-el': v.checked }]"
            @click="selectFringe(v)">
            {{ v.title }}
          </text>
        </view>
      </view>
    </view>

    <view class="panel-view">
      <view class="fixed-view flex-sb">
        <view class="button text-700-528">预览职位</view>
        <view class="button add text-700-228" @click="handleSubmit">发布职位</view>
      </view>
    </view>

    <CityPicker v-model:show="showCityPicker" @change="onCityChange" />

    <up-picker ref="workYearsPickerRef" title="工作年限" keyName="label" :show="showWorkYearsPicker"
      :columns="[workYearsPickerColumns]" @confirm="onWorkYearsPickerConfirm" @cancel="closeWorkYearsPicker" />

    <up-popup :show="showPopup" mode="center" round="20rpx" @close="showPopup = false">
      <view class="popup">
        <view class="flex-c p-h36 popup__hd">
          <text class="text-700-132">提示</text>
        </view>
        <view class="p-h36 popup__bd">
          <text class="text-400-130">确认发布该岗位吗？</text>
        </view>
        <view class="p-h36 popup__ft">
          <view class="cancel-btn" @click="showPopup = false">
            <text>取消</text>
          </view>
          <view class="confirm-btn" @click="onConfirm">
            <text>确认</text>
          </view>
        </view>
      </view>
    </up-popup>
  </view>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import CityPicker from '@/components/city-picker/city-picker.vue'
import { useNavigator } from '@/hooks/use-navigator'
import { useWorkYears } from './useWorkYears'
import { isEmpty } from '@/utils/utils'
import { useRequest } from '@/hooks/use-request'

const showCityPicker = ref(false)
const showPopup = ref(false)

const jobNatureList = ref([{ label: '全职', value: 1 }, { label: '兼职', value: 2 }, { label: '实习', value: 3 }])
const fringeList = ref([{ title: '周末双休', checked: false }, { title: '弹性工作', checked: false }, { title: '13薪', checked: false }])

const formState = reactive({
  // 职位名称
  title: '',
  // 工作性质 1全职 2兼职 3实习
  xingzhi: 1,
  province: '',
  city: '',
  area: '',
  address: '',
  // 最低学历
  lowest_education: '',
  // 薪资范围
  money_range: '',
  // 工作年限
  work_year: '',
  // 职位面试
  content: '',
  // 职位诱惑 多个用,隔开
  fringe: '',
})

const { goback } = useNavigator()

const {
  pickerRef: workYearsPickerRef,
  columns: workYearsPickerColumns,
  show: showWorkYearsPicker,
  open: openWorkYearsPicker,
  close: closeWorkYearsPicker,
} = useWorkYears()

const { run: addPosition } = useRequest((data) => uni.$u.post('/position/add', data), null, {
  immediate: false,
  showToast: true,
  showLoading: true,
  onSuccess: () => goback('getList'),
})

const selectJobNature = (type: number) => {
  if (formState.xingzhi === type) return

  formState.xingzhi = type
}

const selectFringe = (val: object) => {

  // const arr = formState.fringe.split(',')
  // const index = arr.indexOf(val)

  // if (index > -1) {
  //   arr.splice(index, 1)
  // } else {
  //   arr.push(val)
  // }
  val.checked = !val.checked
  formState.fringe = fringeList.value.filter(x => x.checked).map(x => x.title).join(",")
}

const onCityChange = ({ province, city, area }) => {
  formState.province = province.label
  formState.city = city.label
  formState.area = area.label
}

const onWorkYearsPickerConfirm = (e: any) => {
  const selected = e.value[0]

  formState.work_year = selected.value

  closeWorkYearsPicker()
}

const onConfirm = () => {
  showPopup.value = false

  addPosition(formState)
}

const handleSubmit = () => {
  if (!validate()) return

  showPopup.value = true
}

const validate = () => {
  if (isEmpty(formState.title)) {
    uni.$u.toast('请填写职位名称')
    return false
  }
  if (isEmpty(formState.province) || isEmpty(formState.city) || isEmpty(formState.area)) {
    uni.$u.toast('请选择工作地址')
    return false
  }
  if (isEmpty(formState.address)) {
    uni.$u.toast('请填写详细地址')
    return false
  }
  if (isEmpty(formState.money_range)) {
    uni.$u.toast('请填写薪资范围')
    return false
  }
  if (isEmpty(formState.lowest_education)) {
    uni.$u.toast('请填写最低学历')
    return false
  }
  if (isEmpty(formState.work_year)) {
    uni.$u.toast('请选择工作年限')
    return false
  }
  if (isEmpty(formState.people_num)) {
    uni.$u.toast('请填写招聘人数')
    return false
  }
  if (isEmpty(formState.content)) {
    uni.$u.toast('请填写职位描述')
    return false
  }
  if (isEmpty(formState.fringe)) {
    uni.$u.toast('请选择职位诱惑')
    return false
  }
  formState.people_num = Number(formState.people_num)
  return true
}
</script>

<style lang="scss">
page {
  background-color: $page-color-4;
}
</style>

<style lang="scss" scoped>
.card {
  .must {
    &:before {
      content: "*";
      color: #F00B0B;
    }
  }

  .input {
    height: 80rpx;
    margin-top: 24rpx;
    padding: 0 20rpx;
    border-radius: 4rpx;
    border: 1rpx solid $border-color-5;
  }

  .textarea {
    width: 100%;
    height: 195rpx;
    margin-top: 24rpx;
    padding: 20rpx;
    border-radius: 4rpx;
    border: 1rpx solid $border-color-5;
  }

  .picking {
    height: 80rpx;
    margin-top: 24rpx;
    padding: 0 20rpx;
    border-radius: 4rpx;
    border: 1rpx solid $border-color-5;
  }

  .tag {
    height: 54rpx;
    margin-right: 20rpx;
    padding: 0 30rpx;
    line-height: 54rpx;
    border-radius: 4rpx;
    border: 1rpx solid $border-color-5;
  }

  .tag-el {
    color: $text-color-2;
    border-color: $border-color-1;
    background-color: $bg-color-2;
  }
}

.panel-view {
  height: 160rpx;

  .fixed-view {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 140rpx;
    padding: 0 24rpx;
    background-color: $bg-color-1;
  }

  .button {
    width: 340rpx;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    border-radius: 10rpx;
    border: 1rpx solid $border-color-1;
  }

  .add {
    background-color: $bg-color-2;
  }
}

.popup {
  width: 620rpx;
  height: 382rpx;
  border-radius: 20rpx;
  overflow: hidden;

  &__hd {
    height: 141rpx;
    background: linear-gradient(180deg, #F0F4FF 0%, #FFFFFF 100%);
  }

  &__bd {
    height: 127rpx;
    text-align: center;
  }

  &__ft {
    display: flex;
    justify-content: center;

    .cancel-btn,
    .confirm-btn {
      width: 136rpx;
      height: 80rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10rpx;
      font-size: 28rpx;
      font-weight: bold;
    }

    .cancel-btn {
      color: $text-color-3;
      background-color: $bg-color-4;
    }

    .confirm-btn {
      margin-left: 32rpx;
      color: $text-color-2;
      background-color: $bg-color-2;
    }
  }
}
</style>
